<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Area Search</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js">
    </script>
<style type="text/css">
	#areas{
		padding:5px;
		 width:150px;
	}
	#searchBtn{
		padding:5px 10px;
	}
	#infoSpan{
		padding:5px 10px;
		background:lightgray;
	}
	.pull_div{
		margin-left: 4.55%;
	}
	.pull_table{
		border-bottom: solid 1px #999 ;
		border-left: solid 1px #999 ;
		border-right: solid 1px #999;
	}
    .pull_td{
        padding:    4px 10px;
        background: white;
        width: 138px;
    }
</style>
</head>
<body>
	<div  style="margin-top:2%" >
		<form id="form" action="search" method="post">
			<span id="infoSpan">地名搜索</span>
			<input id="areas" type="text"/>
			<input id="searchBtn" type="button" value="Search"/>
		</form>
	</div>
	<div id="show_div" class="pull_div">
		<table id="show_table" class="pull_table">
		</table>
	</div>		
	<script type="text/javascript">
	$(function () {
        function addAction(item){
            var trTemp = $("<tr></tr>");
            trTemp.attr("id","show_tr").appendTo($("#show_table")); //添加tr节点
            var tdTemp = $("<td></td>");
            tdTemp.html(item.area).attr("class","pull_td").appendTo(trTemp); //添加td节点
            tdTemp.on("mouseover",function(){
                  tdTemp.attr("style","background:lightgray;");
            });
            tdTemp.on("mouseleave",function(){
                  tdTemp.attr("style","background:white;");
             });
             tdTemp.on("click",function(){
                  $("#areas").val(tdTemp.html());
                  $("#show_table").empty();
             });
        };
        
        $("#areas").on("keyup",function(){
            var searchInfo = $("#areas").val();
            
            $.ajax({
               type:"GET",
               url:"http://localhost:8080/QuickMatch/searches"+"?content="+searchInfo,
               dataType:"json"
           }).done(function(msg){
                $("#show_table").empty(); //清空原来的下拉列表
                msg.forEach((item)=>{
                    addAction(item);
                });
           }); 
        });
    });
	</script>
</body>
</html>